import { useMount, useReactive } from 'ahooks';
import { MultiRowConfig02 } from '../Data'
import { CollectionView } from '@grapecity/wijmo';
import { useState } from 'react';
import { MultiRow } from '@grapecity/wijmo.react.grid.multirow';
import { Switch } from 'antd'
const WijmoN04 = () => {

    const InitData = useReactive({
        multiRowGroupHeaders: true
    })

    const [Data, setData] = useState()
    const [TableType, setTableType] = useState()
    const [Multi, setMulti] = useState(true)

    useMount(() => {
        const { data, TableType } = MultiRowConfig02(100)
        setData(new CollectionView(data, { groupDescriptions: ['country', 'color'] }))
        setTableType(TableType)
    })


    return (
        <div className="Page">
            <MultiRow
                itemsSource={Data}
                layoutDefinition={TableType}
                multiRowGroupHeaders={Multi}
                initialized={sender => sender.collapseGroupsToLevel(0)}
            />
            <div className="Label">
                <label htmlFor=""> 多列统计 : </label>
                <Switch defaultChecked={Multi} onChange={setMulti} />
            </div>
        </div>
    );
};

export default WijmoN04